<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>示例项目</title>
    <link rel="stylesheet" type="text/css" href="./src/styles/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./src/styles/flex.css" />
    <link rel="stylesheet" type="text/css" href="./src/styles/index.css" />
  </head>
  <body>
    <div class="title">1.基础图形</div>
    <div id="box1" class="mojs-box"><span>矩形</span></div>
    <div id="box2" class="mojs-box"><span>圆形</span></div>
    <div id="box3" class="mojs-box"><span>空心 + 边框</span></div>
    <div id="box4" class="mojs-box"><span>多图形</span></div>

    <div class="title">2.shape模块动画</div>
    <div id="box5" class="mojs-box" style="width: 200px">
      <span class="btn" onclick="box5Click()">多图形</span>
    </div>
    <div id="box6" class="mojs-box" style="width: 200px">
      <span class="btn" onclick="box6Click()">多图形</span>
    </div>
    <div id="box7" class="mojs-box" style="width: 200px">
      <span class="btn" onclick="box7Click()">Then方法</span>
    </div>
    <div id="box8" class="mojs-box" style="width: 200px">
      <span class="btn" onclick="box8Click()">Timeline</span>
    </div>

    <div class="title">3.鼠标点击动画</div>

    <div id="box9" class="mojs-box big">
      <span>Tune</span>
    </div>
    <div class="title">4.综合案例</div>
    <div id="box10" class="mojs-box zonghe">
      <span>综合案例</span>
    </div>

    <script src="./src/lib/mojs_core.js"></script>
    <script>
      // 1、基础图形
      let rect = new mojs.Shape({
        parent: '#box1',
        shape: 'rect', // 定义形状为矩形
        isShowStart: true, // 定义初始化之后就显示
      })
      let circle = new mojs.Shape({
        parent: '#box2',
        shape: 'circle', // 定义形状为圆形
        fill: 'cyan', // 填充颜色
        isShowStart: true,
      })
      let circle2 = new mojs.Shape({
        parent: '#box3',
        shape: 'circle',
        stroke: 'cyan', // 画笔颜色
        fill: 'none', // 不填充
        isShowStart: true,
      })
      let circle3 = new mojs.Shape({
        parent: '#box4',
        shape: 'circle',
        stroke: 'cyan',
        fill: 'none',
        isShowStart: true,
      })
      let circle4 = new mojs.Shape({
        parent: '#box4',
        shape: 'circle',
        radius: 30, // 半径
        isShowStart: true,
        // x: 100,
        // y: 100,
      })
      // 2、shape动画
      let box5 = new mojs.Shape({
        parent: '#box5',
        shape: 'rect',
        fill: 'none',
        stroke: 'cyan',
        radius: 10,
        strokeWidth: 20, // 画笔宽度
        rotate: {
          [-180]: 0, // 使用对象的形式设置，key为开始值，val为结束值（任何属性都可以设置过渡）
        },
        duration: 400, // 默认为300ms
      }).play()

      function box5Click() {
        box5.play()
      }

      let box6 = new mojs.Shape({
        parent: '#box6',
        shape: 'rect',
        fill: 'none',
        stroke: 'cyan',
        radius: 10,
        strokeWidth: 20, // 画笔宽度
        x: {
          [-80]: 80,
        },
        delay: 500, // 动画延迟500ms执行
        repeat: 2, // 动画重复的次数
        isYoyo: true, // 是否轮流反向播放（类似css3中的animation-direction）
        isShowEnd: false, // 动画结束后图形是否显示，默认为true
      }).play()

      function box6Click() {
        box6.play()
      }

      let box7 = new mojs.Shape({
        parent: '#box7',
        shape: 'rect',
        fill: 'none',
        stroke: 'cyan',
        radius: 10,
        strokeWidth: 20,
        rotate: {
          [-180]: 0,
        },
        duration: 600,
      })
        .then({
          strokeWidth: {
            50: 0, // 画笔大小由50过渡到0，所以图形消失了
          },
          stroke: {
            magenta: 'yellow', // 画笔颜色由magenta过渡到yellow
          },
        })
        .play()

      function box7Click() {
        box7.play()
      }

      const OPTIONS = {
        parent: '#box8',
        fill: 'none',
        radius: 10,
        strokeWidth: {
          50: 0,
        },
        scale: {
          0: 1,
        },
        rotate: {
          [-100]: 0,
        },
      }
      // 延迟时间跟动画
      let delay = 0,
        delayStep = 150
      // 矩形
      let rect8 = new mojs.Shape({
        ...OPTIONS,
        shape: 'rect',
        stroke: 'cyan',
      })

      // 圆形
      let circle8 = new mojs.Shape({
        ...OPTIONS,
        shape: 'circle',
        stroke: 'yellow',
        radius: 25,
        strokeWidth: {
          25: 0,
        },
        x: -35,
        y: -35,
        delay: (delay += delayStep), // 延迟执行的时间
      })

      // 三角形
      let triangle8 = new mojs.Shape({
        ...OPTIONS,
        shape: 'polygon',
        stroke: 'magenta',
        radius: 25,
        strokeWidth: {
          25: 0,
        },
        x: -35,
        y: -35,
        delay: (delay += delayStep),
      })

      // 五边形
      let polygon8 = new mojs.Shape({
        ...OPTIONS,
        shape: 'polygon',
        points: 5,
        stroke: '#00F87F',
        x: -20,
        y: -35,
        delay: (delay += delayStep),
      })

      // 相当于rect.play() && circle.play()
      let timeline = new mojs.Timeline()
        .add(rect8, circle8, triangle8, polygon8)
        .play()

      function box8Click() {
        timeline.play()
      }

      // 播放前重置tune
      const OPTIONS2 = {
        parent: '#box9',
        shape: 'circle',
        fill: 'none',
        radius: 25,
        stroke: 'cyan',
        scale: {
          0: 1,
        },
        top: 0,
        left: 0,
        easing: 'cubic.out',
      }

      let circle9 = new mojs.Shape({
        ...OPTIONS2,
        strokeWidth: {
          50: 0,
        },
      }).play()

      let circle92 = new mojs.Shape({
        ...OPTIONS2,
        radius: 10,
        stroke: 'magenta',
        strokeWidth: {
          15: 0,
        },
        delay: 200,
      }).play()

      document.querySelector('#box9').addEventListener('click', (e) => {
        // 鼠标点击时的x，y坐标(这里获取相对当前box)
        let x = e.offsetX
        let y = e.offsetY
        console.log(e)

        // 播放圆形1动画
        circle9
          .tune({
            x,
            y,
          })
          .replay()

        // 播放圆形2动画
        circle92
          .tune({
            x,
            y,
          })
          .replay()
      })

      // 综合案例
      // 颜色
      const COLORS = {
        RED: '#FD5061',
        YELLOW: '#FFCEA5',
        BLACK: '#29363B',
        WHITE: 'white',
        VINOUS: '#A50710',
      }

      // 过渡时间
      const DURATION = 800

      // 父元素图形，只用于整体的位置的变化
      const showBase = new mojs.Shape({
        parent: '#box10',
        fill: 'none',
        radius: 20,
        x: {
          [-150]: 0,
          easing: 'cubic.out',
        },
        y: {
          [90]: 0,
          easing: 'cubic.out',
        },
        duration: DURATION + 400,
        // 动画执行完毕，添加样式、事件
        onComplete() {
          this.el.style.cursor = 'pointer'
          this.el.addEventListener('click', scaleAnime, false)
        },
      })

      // 最后执行的圆形扩散
      const circle10 = new mojs.Shape({
        parent: '#box10',
        fill: COLORS.WHITE,
        parent: showBase.el, // 定义父元素
        radius: 50,
        scale: {
          0.4: 1,
        },
        duration: 650,
        opacity: {
          0.5: 0,
        },
        delay: DURATION + 100,
        easing: 'cubic.out',
      })

      const showUp = new mojs.Shape({
        fill: 'none',
        stroke: COLORS.WHITE,
        parent: showBase.el, // 定义父元素
        radius: {
          0: 10,
        },
        rotate: {
          560: 270,
        },
        strokeWidth: {
          0: 22,
          easing: 'cubic.inout',
        },
        strokeDasharray: '100%',
        strokeDashoffset: {
          '-100%': '0%',
          easing: 'cubic.in',
        },
        strokeLinecap: 'round',
        duration: DURATION,
      })
        .then({
          scale: 0.75,
          duration: 250,
        })
        .then({
          scale: 1,
          duration: 300,
        })

      const addButtonCross = new mojs.Shape({
        shape: 'cross',
        parent: showUp.el, // 定义旋转的圆形为父元素
        fill: 'none',
        stroke: COLORS.VINOUS,
        radius: 6,
        strokeLinecap: 'round',
        isShowStart: true,
        duration: DURATION,
        angle: {
          0: -360,
        },
        scale: {
          0: 1,
        },
        y: {
          35: 0,
        },
        x: {
          35: 0,
        },
      }).then({
        angle: -540,
        duration: DURATION / 2,
        easing: 'cubic.out',
      })

      const timelineback = new mojs.Timeline()
      timelineback.add(showBase, circle10, showUp, addButtonCross).play()

      // 点击按钮放大动画
      function scaleAnime() {
        circle10
          .tune({
            delay: 0,
            scale: {
              0.4: 30,
            },
            opacity: 1,
            duration: 500,
            easing: 'cubic.inout',
          })
          .replay()
      }
    </script>
  </body>
</html>
